<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="7">
            <p>标题</p>
            <p class="flowHide" :title="initData.tittle">{{ initData.tittle }}</p>
          </el-col>
          <el-col :span="8" :offset="1">
            <p>话题类型</p>
            <p>{{ getInforMationTopic(initData.topic) }}</p>
          </el-col>
          <el-col :span="8">
            <p>资讯类型</p>
            <p>{{ getInforMationType(initData.type) }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button v-if="accreditChildren.editorInformation" type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="资讯详情" name="first">
          <div class="infoBox">
            <el-col :span="24">标题：{{ initData.tittle }}</el-col>
            <!-- <el-col :span="12">发布会员：{{initData.sort}}</el-col> -->
            <el-col :span="12">话题类型：{{ getInforMationTopic(initData.topic) }}</el-col>
            <el-col :span="12">资讯类型：{{ getInforMationType(initData.type) }}</el-col>
            <el-col :span="12">发布会员：{{ getgetInforMationMemberId(initData.memberId) }}</el-col>
            <el-col :span="24">
              标签：
              <el-tag
                v-for="tag in initData.label ? JSON.parse(initData.label) :[]"
                :key="tag.id"
                :style="{color:'#'+tag.color}"
                :disable-transitions="false"
                @click="pushArr(tag)"
              >{{ tag.label }}</el-tag>
            </el-col>
            <el-col :span="24">是否发布：{{ initData.status ? "已发布" :'暂未发布' }}</el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资讯内容" name="third">
          <el-col :span="24">
            <div v-if="textarea" v-html="textarea" />
            <div v-else>暂未设置资讯内容</div>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <el-row v-loading="loading" class="padding20"></el-row> -->
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import { createDics, selfdicCode } from '~/utils/util';
export default {
  props: ['id', 'pageHeight', 'updateRight', 'accreditChildren'],
  data() {
    return {
      showInfo: false,
      loading: true,
      activeName: 'first',
      initData: {
        memberId: '',
        status: 0,
        topic: '',
        type: '',
        label: '',
        tittle: ''
      },
      typeCode: '',
      textarea: '',
      resultDics: {},
      options: [
        {
          key: '生意资讯',
          val: 0
        },
        {
          key: '生意圈',
          val: 1
        },
        {
          key: '线下沙龙',
          val: 2
        },
        {
          key: '新闻快讯',
          val: 3
        },
        {
          key: '系统信息',
          val: 4
        }
      ]
    }
  },
  watch: {
    id() {
      this.getInitData()
    },
    updateRight() {
      this.getInitData()
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getInforMationType(res) {
      return this.options.filter(v => v.val === res)
        ? this.options.filter(v => v.val === res)[0].key
        : '';
    },
    getgetInforMationMemberId(res) {
      return this.memberDtos.filter(v => v.id === res)
        ? this.memberDtos.filter(v => v.id === res)[0].nickName
        : '';
    },
    getInforMationTopic(res) {
      return this.resultDics.INFORMATION_TOPIC.children.filter(
        v => v.dicCode === res
      )
        ? this.resultDics.INFORMATION_TOPIC.children.filter(
          v => v.dicCode === res
        )[0].dicName
        : '';
    },
    getInitData() {
      this.$post({
        url: mmUrl.Infomation.loadEdit,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        if (this.$props.id !== 'create') {
          this.initData = res.item
          this.typeCode = selfdicCode({
            data: res.dics,
            dicCode: 'TEXTINFORMATION_POSTINFORMATION'
          })
          this.sureIsCreate(res.item.id)
        }
        this.memberDtos = res.memberDtos
        this.resultDics = createDics(res.dics, 'dicCode')
        this.loading = false
        this.showInfo = true
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    sureIsCreate(id) {
      this.$post({
        url: mmUrl.text.get,
        data: {
          dataId: id,
          typeCode: this.typeCode
        }
      }).then(res => {
        if (!res.item) {
          return false
        } else {
          this.textarea = res.item.content
        }
      })
    }
  }
}
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
.flowHide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
